@import '../../theme';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/close';

$modal-header-padding: 30px 27px 15px 27px !important;
$modal-content-border-radius: 0;
$modal-dialog-margin-sm: 0 !important;
$modal-max-width: 768px !important;
$modal-min-width: 768px !important;
$modal-max-width-md: 768px !important;
$modal-min-width-md: 768px !important;
$modal-max-width-sm: 100% !important;
$modal-min-width-sm: 100% !important;

.modal {
  &-header {
    padding: $modal-header-padding;
  }
  &-body {
    padding: 27px 30px;
  }
  &-content {
    border-radius: $modal-content-border-radius;
  }
  .close {
    font-size: 38px;
    font-weight: 100;
    bottom: 5px;
    position: relative;
  }
  &[aria-hidden='false'] {
    display: block;
  }
}

.modal-xl,
.modal-lg {
  max-width: $modal-max-width;
  min-width: $modal-min-width;
}
@include media-breakpoint-up(md) {
  .modal-lg {
    max-width: $modal-max-width-md;
    min-width: $modal-min-width-md;
  }
}
@include media-breakpoint-down(sm) {
  .modal-lg {
    min-width: $modal-max-width-sm;
    max-width: $modal-min-width-sm;
  }
  .modal-dialog-centered {
    margin: $modal-dialog-margin-sm;
    height: 100%;
    align-items: unset !important;
    overflow-y: auto;
  }
}
